<template>
    <div>
        <m-filter placeholder="请输入用户名称" search-key="" @search="contentSearch">
            <a-button
                :loading="createLoading"
                class="ml20"
                icon="plus"
                type="primary"
                @click="create(true)"
                v-has="'add'"
            ></a-button>
            <template slot="search-form">
                <a-form-model layout="inline" class="index-search-form-model">
                    <a-form-model-item>
                        <el-date-picker
                            @change="searchTable"
                            size="small"
                            v-model="searchParams.applyYear"
                            type="year"
                            value-format="yyyy"
                            placeholder="试点年度"
                        ></el-date-picker>
                    </a-form-model-item>

                    <a-form-model-item>
                        <a-select
                            placeholder="创建状态"
                            v-model="searchParams.cjzt"
                            allowClear
                            @change="searchTable"
                            showSearch
                            optionFilterProp="title"
                        >
                            <a-select-option
                                v-for="(item, index) in applyStateList"
                                :key="index"
                                :value="item.code"
                                :title="item.name"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button class="ml20" icon="redo" type="primary" @click="reset">重置</a-button>
                    </a-form-model-item>
                </a-form-model>
            </template>
        </m-filter>
        <div class="table">
            <a-table
                rowKey="id"
                :columns="columns"
                :data-source="tableData"
                :loading="tableLoading"
                :pagination="pagination"
                :scroll="{ y: true }"
                @change="handleTableChange"
            >
                <template slot="operate" slot-scope="text, record">
                    <template>
                        <span class="primary-color" @click="openModal(record, record.cjzt === 1)">
                            {{ record.cjzt === 1 ? '申报' : '查看' }}
                        </span>
                    </template>

                    <template v-if="[3, 4, 6, 7].includes(record.cjzt)">
                        <a-divider type="vertical" />
                        <span class="primary-color" @click="openStopModal(record)">原因</span>
                        <!--                        <a-popconfirm-->
                        <!--                            title="确定重新申报吗?"-->
                        <!--                            ok-text="是"-->
                        <!--                            cancel-text="否"-->
                        <!--                            @confirm="againApply(record)"-->
                        <!--                        >-->
                        <!--                            <span class="primary-color">编辑</span>-->
                        <!--                        </a-popconfirm>-->
                        <template v-if="[3, 6].includes(record.cjzt)">
                            <a-divider type="vertical" />
                            <span @click="againApply(record)" class="primary-color">编辑</span>
                        </template>
                    </template>
                    <template v-if="record.cjzt === 1">
                        <a-divider type="vertical" v-has="'edit:line'" />
                        <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="del(record.id)">
                            <span class="danger-color" v-has="'del'"></span>
                        </a-popconfirm>
                    </template>
                    <template v-if="record.cjzt === 10">
                        <a-divider type="vertical" />

                        <span @click="showRevokeReason(record)" class="primary-color">
                            {{ '原因' }}
                        </span>
                    </template>
                </template>
            </a-table>
        </div>
        <stop-reason
            v-if="showStopModal"
            :showStopModal.sync="showStopModal"
            :record="currentRow"
            @close="closeStopModal"
        ></stop-reason>
        <revoke-reason
            v-if="showCpModal"
            :showCpModal="showCpModal"
            :isEdit="cpModalEdit"
            @close="closeCpModal"
            :record="currentRow"
        />
    </div>
</template>

<script>
import { PAGINATION } from '../../../common/config'
import { getTableList, applyApi } from '../../../common/api/applyManage'
import { areaMixin } from '../../../common/mixin'
import { constant } from '@/common/config'
import Bus from '@/common/bus.js'
import { selfEvaluationApi } from '../../../common/api/selfEvaluation'
import { baseInfoDetail } from '../../../common/api/setting'
import StopReason from '@/views/applyManage/StopReason'
import RevokeReason from '@/views/applyManage/RevokeReason'
const { ENTERPRISE } = constant
import { getFinalPageNum } from '@/utils/methods'
const searchParams = {
    applyYear: undefined,
    cjzt: undefined,
}
export default {
    name: 'userManage',
    components: { StopReason, RevokeReason },
    data() {
        return {
            showCpModal: false,
            cpModalEdit: true,
            showStopModal: false,
            createLoading: false,
            isShowModal: false,
            currSelectedTreeNode: [],
            // search
            currentRow: {},
            roleList: [],
            searchParams: { ...searchParams },
            // table
            pagination: PAGINATION(),
            tableData: [],
            tableLoading: false,
            applyNeedData: {
                baseInfoDetail: {},
                selfEvaluationList: [],
            },
        }
    },
    computed: {
        applyStateList() {
            return this.$store.state.applyState
        },
        columns() {
            const applyState = {}
            this.$store.state.applyState.forEach(item => {
                applyState[item.code] = item.name
            })
            return [
                {
                    title: '试点年度',
                    dataIndex: 'applyYear',
                },
                {
                    title: '行政级别',
                    dataIndex: 'xzjbName',
                },
                {
                    title: '行政隶属',
                    dataIndex: 'xzlsName',
                },
                {
                    title: '创建工作主要负责人',
                    dataIndex: 'cjgzzyfzr',
                },
                {
                    title: '安办机构主要负责人',
                    dataIndex: 'abzyfzr',
                },
                {
                    title: '日常工作联系人',
                    dataIndex: 'rcgzlxr',
                },
                {
                    title: '创建状态',
                    dataIndex: 'cjzt',
                    customRender: (text, record) => {
                        return applyState[text]
                    },
                },
                {
                    title: '操作',
                    dataIndex: 'operate',
                    scopedSlots: { customRender: 'operate' },
                    width: 250,
                },
            ]
        },
    },
    watch: {},
    mounted() {
        this.getTableData()
    },
    methods: {
        closeCpModal(type) {
            this.showCpModal = false
            if (type === 'reset') {
                this.reset()
            }
        },
        showRevokeReason(record) {
            this.showCpModal = true
            this.currentRow = record
            this.cpModalEdit = false
        },
        openStopModal(record) {
            this.showStopModal = true
            this.currentRow = record
        },
        async againApply(record) {
            Bus.$emit('loadingStateChange', true)
            try {
                let params = {
                    id: record.id,
                }
                let res = await applyApi.again(params)
                if (res.code == 200) {
                    this.openModal(record, true)
                }
            } catch (e) {
                console.log(e)
            }
            Bus.$emit('loadingStateChange', false)
        },
        closeStopModal() {
            this.showStopModal = false
        },
        async getPreviousConditions() {
            this.createLoading = true
            try {
                let resArr = await Promise.all([selfEvaluationApi.all(), baseInfoDetail()])
                if (resArr[0].code == 200) {
                    this.applyNeedData.selfEvaluationList = resArr[0].data
                }
                if (resArr[1].code == 200) {
                    this.applyNeedData.baseInfoDetail = resArr[1].data
                }
            } catch (e) {
                console.log(e)
            }
            this.createLoading = false
            if (this.applyNeedData.selfEvaluationList.length === 0) {
                this.$message.error('未检测到自评表，请先添加自评表后再尝试申报')
                return false
            }
            for (let key in this.applyNeedData.baseInfoDetail) {
                if (!this.applyNeedData.baseInfoDetail[key]) {
                    this.$message.error('基本信息缺失，请点击右上角小三角，完善基本信息后再尝试申报')
                    return false
                }
            }
            return true
        },
        async create(isEdit) {
            sessionStorage.removeItem('applyRecordId')
            let result = await this.getPreviousConditions()
            if (result) {
                this.$emit('tabChange', 'create', this.applyNeedData, isEdit)
            }
        },
        handleTableChange(pagination) {
            this.pagination.current = pagination.current
            this.pagination.pageSize = pagination.pageSize
            this.getTableData()
        },
        async openModal(record, isEdit) {
            sessionStorage.removeItem('applyRecordId')
            this.$loading({ fullscreen: true })
            try {
                let res = await applyApi.detail({ id: record.id, state: 1 })
                if (res.code == 200) {
                    this.applyNeedData.record = res.data
                    this.create(isEdit)
                }
            } catch (e) {
                console.log(e)
            }
            this.$loading().close()
        },
        del(id) {
            applyApi.del({ id }).then(() => {
                this.$message.success('删除成功')
                this.pagination.current = getFinalPageNum(
                    this.pagination.total,
                    this.pagination.current,
                    this.pagination.pageSize,
                    1,
                )
                this.getTableData()
            })
        },
        reset() {
            this.searchParams = { ...searchParams }
            this.searchTable()
        },
        contentSearch(value) {
            Object.assign(this.searchParams, value)
            this.searchTable()
        },
        searchTable() {
            clearTimeout(this._inputSearchTimer)
            this._inputSearchTimer = setTimeout(() => {
                this.pagination.current = 1
                this.getTableData()
            }, 600)
        },
        getTableData() {
            const { current: pageNum, pageSize } = this.pagination
            const { applyYear, cjzt } = this.searchParams
            this.tableLoading = true
            getTableList({
                pageSize,
                pageNum,
                applyYear,
                cjzt,
            }).then(res => {
                if (res.code == 200) {
                    res = res.data
                    this.tableData = res.list
                    this.tableLoading = false
                    this.pagination.total = res.rowCount
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.index-search-form-model .ant-form-item {
    margin-bottom: 0 !important;
}
</style>
